<template>
	<div class="main-container-wrapper">
		<div class="tab-vans">
			<van-nav-bar title="通知公告" safe-area-inset-top fixed left-text="返回" left-arrow @click-left="back" />
			<div class="notice-bar">通知公告<van-icon name="volume" style="margin-left: 5px" /></div>
		</div>
		<van-pull-refresh v-model="refreshing" class="content" @refresh="onRefresh">
			<van-list :immediate-check="false" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
				<div class="notice-list" v-for="item in list" :key="item.id" @click="goDetail(item.id)">
					<div class="notice-title ellipsis-1">{{ item.title }}</div>
					<div class="notice-content ellipsis-2">
						{{ item.summary }}
					</div>
				</div>
				<van-empty description="暂无内容" v-if="list.length == 0 && !loading" />
			</van-list>
			<van-loading size="16px" v-if="loading && !refreshing">加载中...</van-loading>
			<van-back-top offset="500" />
		</van-pull-refresh>
	</div>
</template>
<script setup>
import { useRouter } from 'vue-router';
import { noticePage } from '/@/api/notice';
const loading = ref(false);
const refreshing = ref(false);
const finished = ref(false);
const list = ref([]);
const Router = useRouter();
const params = ref({
	current: 0,
	size: 10,
	publishStatus: '1',
});
const onRefresh = () => {
	params.value.current = 0;
	refreshing.value = true;
	finished.value = false;
	list.value = []; // 清空列表数据
	onLoad(); // 重新获取数据
};
const onLoad = () => {
	if (!loading.value) {
		loading.value = true;
		params.value.current += 1;
		noticePage(params.value)
			.then((res) => {
				if (res.ok) {
					list.value = list.value.concat(res.data.records);
					finished.value = res.data.current >= res.data.pages && list.value.length > 0;
				}
			})
			.finally(() => {
				refreshing.value = false;
				loading.value = false;
			});
	}
};
const goDetail = (id) => {
	Router.push({
		path: '/notice/detail',
		query: {
			id: id,
		},
	});
};
const back = () => {
	Router.back();
};
onMounted(() => {
	onLoad();
});
</script>
<style lang="scss" scoped>
.main-container-wrapper {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #fff;

	.tab-vans {
		z-index: 1;
		box-shadow: 0 3px 8px 0 #00000029;
	}

	.notice-bar {
		position: relative;
		padding: 10px 25px;
		margin-top: 46px;
		font-size: 14px;
		font-weight: 800;
	}

	.notice-bar::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
		pointer-events: none;
		content: ' ';
		border-bottom: 1px solid #e2e2e2;
		transform: scaleY(0.5);
	}

	.content {
		position: relative;
		height: calc(100% - 96px);
		padding: 0 20px;
		margin-top: 3px;
		overflow: scroll;

		.notice-list {
			box-sizing: border-box;
			padding: 16px;
			margin-top: 16px;
			border-radius: 5px;

			/* background: rgba(25, 137, 250, 0.1); */

			/* background-color: #f5f7fa; */
			box-shadow: 0 3px 8px 0 #00000029;

			.notice-title {
				font-size: 14px;
				font-weight: 600;
				color: #303133;
			}

			.notice-content {
				margin-top: 12px;
				line-height: 24px;
				color: #909399;
				cursor: default;
			}

			.ellipsis-1 {
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.ellipsis-2 {
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}

	:deep(.van-loading) {
		width: 100%;
		padding: 10px;
		text-align: center;
	}
}
</style>
